<!-- MixedInput 最终拼接出链接 -->
<template>
  <div class="mixed-input mixed-input-box">
    <div class="mixed-input-content">
      <!-- 透传： {{$props, $attrs, _moreProps}} -->
      <component v-if="selectType" :is="selectType" v-bind="{...$attrs, ..._moreProps}" @change="onChange"></component>
    </div>

    <div class="mixed-input-select">
      <el-select v-model="selectType" placeholder="请选择" @change="onSelectChange">
        <el-option
          v-for="item in original_type_list"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
  import EditNormalComponentsGather from '@/views/card/js/mixins/edit-normal-components-gather.js';
  import PanelCommonComputed from '@/views/card/js/mixins/panel-common-computed.js';
  import { isAbsUndef } from '@/utils/public.js';
  import { defineAsyncComponent } from 'vue';
  import { mapState } from 'vuex'
  export default {
    name: 'MixedInput',
    mixins: [PanelCommonComputed, EditNormalComponentsGather],
    data() {
      return {
        selectType: '',
      }
    },
    props: {
      original_type: String | Number,
      original_type_list: {
        type: Array,
        default: [],
      },
      original_type_prop_list: Object,
      original_type_config_list: Object,
    },
    emits: ["change", "update:modelValue"],
    computed: {
      ...mapState({
        site_id: state => state.cardComponents.siteData.id,
      }),
      _moreProps() {
        let _newMoreProps = {};
        if (this.selectType == 'DropdownNormal'
          && this.original_type_prop_list
          && this.original_type_prop_list[this.selectType]
          && this.original_type_prop_list[this.selectType].data_type === 'PANEL') {
            let valLists = [];
            this.panels && this.panels.length > 0 && this.panels.forEach((item, index) => {
              valLists.push({
                name: '弹层_' + (index + 1),  // 默认类型
                value: index,
              });
            });
            _newMoreProps = {
              valLists: valLists,
            };
        }

        return _newMoreProps;
      },
    },
    components: {
      TooltipsCommon: defineAsyncComponent(() => import('@/views/components/edit/comps/TooltipCommon.vue')),
    },
    mounted() {
      this.selectType = this.original_type || '';
    },
    methods: {
      onSelectChange(val) {
        // 1. 非 InputNormal 时，重置值
        if(val != 'InputNormal') this.$emit('change', '');
      },
      onChange(val) {
        // 1. 拼接返回值
        const config = this.original_type_config_list[this.selectType];
        let _newVal = val + '&site_id=' + this.site_id + '&';
        let _node = _.cloneDeep(config);
        while(_node) {
          let _prefix = !isAbsUndef(_node.prefix) ? _node.prefix.toString() : '';
          let _suffix = !isAbsUndef(_node.suffix) ? _node.suffix.toString() : '';
          _newVal = _prefix + _newVal + _suffix;
          if (_node.encode) _newVal = encodeURIComponent(_newVal);
          _node = _node.parent;
        }

        // 2. change
        this.$emit('change', _newVal);
      },
    },
  }
</script>

<style lang="scss">
  .mixed-input-box {
    position: relative;
    display: flex;
    align-items: center;

    .mixed-input-content {
      flex: 1;
    }

    .mixed-input-select {
      max-width: 25%;
      min-width: 50px;
      padding-right: 16px;

      .el-input__inner {
        padding-left: 2px !important;
        padding-right: 20px !important;
      }
    }
  }
</style>
